<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-22 01:03:45
 * @LastEditTime: 2024-06-24 17:01:40
-->
<script lang="ts" setup>
//变动
import { IMenu, IResultPage, IMenuSearch, apiQuery, apiDetails } from '@/api/service/system/menu';
import {searchConstants,tableConstants, detailsConstants } from '@/constant/system/menu';
//固定
import { reactive, toRefs, onMounted } from 'vue';
import LayoutMain from '@/layouts/Main/index.vue';
import DialogFromButton from './modules/dialog.vue';
import { IResult, QResult, Result } from '@/utils/resultUtils';
const { searchData, tableData, detailsData } = toRefs(
    reactive({
        searchData: {} as IMenuSearch,
        tableData: {} as IResultPage,
        detailsData: {} as IMenu
    })
);
onMounted(() => {
    searchChange(searchData.value);
});

const searchChange = async (searchData: IMenuSearch) => {
    let result: IResult<IResultPage> = await apiQuery(searchData);
    QResult(result, function () {
        tableData.value = Object.freeze(result.data);
    });
};
const deleteChange = (id: any) => {
    console.log(id);
};
const deleteBatchChange = (ids: Array<any>) => {
    console.log(ids);
};
const detailsChange = async (data: any) => {
    let result: IResult<IMenu> = await apiDetails(data.id);
    console.log(result);

    QResult(result, function () {
        detailsData.value = Object.freeze(result.data);
    });
};
</script>
<template>
    <LayoutMain :table="{ constants: tableConstants, data: tableData, rowKey: 'id' }" 
    :page="tableData" :search="{ constants: searchConstants, data: searchData }" 
    :details="{ constants: detailsConstants, data: detailsData }" 
    @detailsChange="detailsChange" @deleteBatchChange="deleteBatchChange" 
    @deleteChange="deleteChange" @searchChange="searchChange">
        <template #header-button>
            <DialogFromButton />
        </template>
        <template #table-button>
            <DialogFromButton edit />
        </template>
    </LayoutMain>
</template>
<style lang="scss" scoped></style>
